<template>
<el-drawer v-model="drawer" size="952" class="equity-drawer">
    <div v-loading="loading" class="pos-relative h100">
        <el-form ref="equityFormRef" :model="equityForm" :rules="rules" label-width="100px" class="equity-form">
            <el-form-item label="权益名称" prop="name">
                <el-input v-model="equityForm.name" placeholder="输入名称"></el-input>
            </el-form-item>
            <el-form-item label="权益明细" prop="detail">
                <el-input v-model="equityForm.detail" placeholder="输入介绍"></el-input>
            </el-form-item>
            <el-form-item label="权益图标" prop="icon">
                <e-upload v-model="equityForm.icon_before"/>
                <e-upload v-model="equityForm.icon_after" class="ml-25"/>
            </el-form-item>
            <el-form-item label="权益规则" prop="content">
                <wangEditor v-if="drawer" height="300" :html="equityForm.content" @change="(html) => equityForm.content = html"/>
            </el-form-item>
            <el-form-item label="按钮文案">
                <el-input v-model="equityForm.copywriting" placeholder="没有则不需要输入"></el-input>
            </el-form-item>
        </el-form>
        <div class="bottom-btn">
            <e-button type="assistant" @click="closeDrawer">取消</e-button>
            <e-button @click="handleSure">确定</e-button>
        </div>
    </div>
</el-drawer>
</template>
<script setup>
import { systemEquityInfoApi, systemEquityAddApi, systemEquityEditApi } from "@/api/modules/system";
import wangEditor from '@/components/Editor/wangEditor.vue';
const drawer = ref(false)
const equityForm = ref({
    name: undefined,
    detail: undefined,
    content: undefined,
    copywriting: undefined,
    icon_before: undefined,
    icon_after: undefined,
})
const { proxy } = getCurrentInstance();
const rules = ref({
    name: [
        { required: true, message: '请输入权益名称', trigger: 'blur' }
    ],
    detail: [
        { required: true, message: '请输入权益介绍', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入权益规则', trigger: 'blur' }
    ],
})
const api = ref();
const callback = ref();
const acceptParams = (params) => {
    drawer.value = true;
    api.value = params.list ? systemEquityEditApi : systemEquityAddApi;
    callback.value = params.callback;
    setTimeout(() => {
        proxy.$refs.equityFormRef.resetFields();
        if (!params.list) resetForm();
        else getInfo(params.list);
    }, 10);
}
// 获取详情
const loading =  ref(false);
const getInfo = async(params) => {
    try {
        loading.value = true;
        const res = await systemEquityInfoApi(params.id);
        equityForm.value = res.data;
    } finally {
        loading.value = false;
    }
}
const resetForm = () => {
    for (const i in equityForm.value) {
        equityForm.value[i] = undefined;
    }
}
const closeDrawer = () => {
    drawer.value = false;
}
const handleSure = () => {
    proxy.$refs.equityFormRef.validate(async(valid) => {
        if (valid) {
            try {
                loading.value = true;
                const res =await api.value(equityForm.value)
                proxy.$modal.msgSuccess(res.message);
                equityForm.value.id = res.data.id;
                drawer.value = false;
                callback.value && callback.value(equityForm.value);
            } finally {
                loading.value = false;
            }
        }
    })
}
defineExpose({
    acceptParams
})
</script>
<style lang="scss">
.equity-drawer {
    .el-drawer__header {
        margin-bottom: 0;
        padding: 28px 35px;
        height: 86px;
        box-sizing: border-box;
        border-bottom: 2px solid #F04142;
    }
    .el-drawer__body {
        padding: 45px;
    }
    .bottom-btn {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .equity-form {
        height: calc(100% - 70px);
        overflow: auto;
        padding-right: 12px;
        &::-webkit-scrollbar {
            width: 8px;
            border-radius: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background: #CDCBCB;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
    }
}
</style>